<template>
    <view class="container">
        <view class="header"></view>

        <view class="step">
            <view class="title">
                成为经纪人
                <text style="color: #eb4f38">轻松月入万元</text>
            </view>
            <view class="content">海量任务 赚到手软</view>
            <view class="list">
                <view class="item"><view>1</view></view>
                <view class="itemtitle">
                    <view>入驻申请</view>
                    <view>认真填写入驻信息,方便审核</view>
                </view>
            </view>

            <view class="list">
                <view class="item"><view>2</view></view>
                <view class="itemtitle">
                    <view>领取任务</view>
                    <view>到任务中心,领取高佣任务</view>
                </view>
            </view>

            <view class="list">
                <view class="item"><view>3</view></view>
                <view class="itemtitle">
                    <view>赚取佣金</view>
                    <view>向任务推荐合适人才,赚取佣金</view>
                </view>
            </view>
        </view>
        <form @submit="savepubinfo" report-submit>
            <view class="form">
                <view class="content">
                    <view class="item">
                        <input class="inputlist" placeholder="请输入您的姓名" name="name" type="text" value="" />
                    </view>
                    <view class="item">
                        <input class="inputlist" placeholder="请输入您的手机号" name="tel" type="text" value="" />
                    </view>
                </view>
            </view>
            <view class="joinbtn">
                <button formType="submit">立即入驻</button>
            </view>
        </form>
    </view>
</template>

<script>
import { Agent } from '../../model/agent-model.js';
var agent = new Agent();
export default {
    data() {
        return {};
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        uni.setNavigationBarTitle({
            title: '经纪人入驻'
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        savepubinfo: function (e) {
            var that = this;
            var name = e.detail.value.name;
            var tel = e.detail.value.tel;
            var weixin = e.detail.value.weixin;
            var email = e.detail.value.email;
            var tid = uni.getStorageSync('tid');
            if (!tid) {
                tid = 0;
            }
            if (name == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入您的姓名',
                    showCancel: false
                });
                return;
            }
            if (tel == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入您的手机号',
                    showCancel: false
                });
                return;
            }
            if (weixin == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入您的微信号',
                    showCancel: false
                });
                return;
            }
            var params = {
                tid: tid,
                name: name,
                weixin: weixin,
                tel: tel
            };
            agent.Saveagent((data) => {
                if (data.status == 0) {
                    uni.showModal({
                        title: '提示',
                        content: data.msg,
                        showCancel: false,
                        success: function () {
                            uni.reLaunch({
                                url: '/pages/user/index'
                            });
                        }
                    });
                } else {
                    uni.showModal({
                        title: '提示',
                        content: data.msg,
                        showCancel: false
                    });
                    return;
                }
            }, params);
        }
    }
};
</script>
<style>
page {
    background-color: #fff;
}
.container {
    background-color: #fff;
}
.container .header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container .header .title {
    font-size: 1.2rem;
    font-weight: 600;
    padding-top: 30rpx;
}
.container .header .content {
    font-size: 0.9rem;
    padding-top: 20rpx;
    color: #868686;
}
.container .header .logo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 620rpx;
    margin-top: 60rpx;
    flex-wrap: wrap;
}

.container .header .logo image {
    width: 125rpx;
    height: 125rpx;
    border-radius: 50%;
    margin-bottom: 80rpx;
}

.container .step {
    width: 100%;
    display: flex;
    flex-direction: column;

    background: #f6fbf5;
    padding-bottom: 20rpx;
}
.container .step .title {
    font-size: 1.2rem;
    font-weight: 600;
    padding-top: 30rpx;
    align-self: center;
}
.container .step .content {
    font-size: 0.9rem;
    padding-top: 20rpx;
    color: #868686;
    align-self: center;
    margin-bottom: 20rpx;
}
.container .step .list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 30rpx;
}
.container .step .list .item {
    height: 100rpx;
    width: 100rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-left: 40rpx;
    margin-top: -20rpx;
}
.container .step .list .item view {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: 60rpx;
    height: 60rpx;
    background: #eb4f38;
    color: #fff;
    border-radius: 75rpx;
    font-size: 0.8rem;
    font-weight: 600;
}

.content {
    padding-left: 20rpx;
}

.container .step .list .itemtitle {
    color: #888d87;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
    height: 100rpx;
}

.container .step .list .itemtitle view:nth-child(1) {
    color: #888d87;
    font-size: 0.9rem;
    font-weight: 600;
}

.container .step .list .itemtitle view:nth-child(2) {
    color: #c0c2bd;
    font-size: 0.8rem;
}

.container .joinbtn {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 50rpx;
    margin-bottom: 50rpx;
}

.container .joinbtn button {
    background: #eb4f38;
    color: #fff;
    font-size: 0.8rem;
    width: 600rpx;
    height: 80rpx;
    line-height: 80rpx;
}
.container .doagree {
    font-size: 0.7rem;
    margin-left: 50rpx;
    margin-top: 40rpx;
}

.content {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    margin-top: 20rpx;
}
.content .item {
    font-size: 0.8rem;
    width: 100%;
    align-self: center;
    margin-bottom: 10rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.inputlist {
    border: 1rpx solid #efefef;
    width: 80%;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 4rpx;
    align-self: center;
}
</style>
